<template>
  <div>
    <el-card class="box-card">
      <div slot="header"
           class="clearfix">
        <span style="color: #000; font-weight: 600">存储配置</span>
        <div style="margin-top: 10px">用于图片上传保存等场景</div>
      </div>

      <el-tabs v-model="activeName"
               @tab-click="handleClick(activeName)">
        <el-tab-pane label="本地存储"
                     name="1">
          <localStorage :data="localCurrent"
                        @done="init"
                        :tabSwitch="tabSwitch"></localStorage>
        </el-tab-pane>
        <el-tab-pane label="七牛云"
                     name="2">
          <qiniuyunOss :data="qnyCurrent"
                       @done="init"
                       :tabSwitch="tabSwitch"></qiniuyunOss>
        </el-tab-pane>
        <el-tab-pane label="阿里云oss"
                     name="3">
          <alibabaCloudOSS :data="alyCurrent"
                           @done="init"
                           :tabSwitch="tabSwitch"></alibabaCloudOSS>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>
  
  <script>
import alibabaCloudOSS from './components/alibabaCloudOSS.vue';
import localStorage from './components/localStorage.vue'
import qiniuyunOss from './components/qiniuyunOss.vue';
import { config } from '@/api/config/index'

export default {
  components: { alibabaCloudOSS, qiniuyunOss, localStorage },
  data () {
    return {
      activeName: '2',
      tabSwitch: '2',
      localCurrent: null,
      alyCurrent: null,
      qnyCurrent: null,
      txyCurrent: null
    };
  },
  created () {
    this.init();
    this.tabIndex()
  },
  methods: {
    tabIndex () {

    },
    handleClick (tab) {
      console.log(tab);
      this.tabSwitch = tab;
      this.init(true);
    },
    init (val) {
      config({
        // id: this.$store.state.user.info.userId
      })
        .then((res) => {
          console.log(res);
          if ((!val)) {
            this.tabSwitch = res.data.upload_way;
            this.activeName = res.data.upload_way;
          }
          if (this.tabSwitch == '1') {
            this.localCurrent = res.data;
          } else if (this.tabSwitch == '2') {
            this.qnyCurrent = res.data;

          } else if (this.tabSwitch == '3') {
            this.alyCurrent = res.data;
          } else {
            this.txyCurrent = res.data;
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    }
  }
};
  </script>
  
  <style lang="less" scoped></style>
  